<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>添加作品</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath }/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
    
    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath }/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>

	<script src="${pageContext.request.contextPath }/js/summernote/summernote.min.js"></script>
	<script src="${pageContext.request.contextPath }/js/summernote/summernote-zh-CN.js"></script>
    <link href="${pageContext.request.contextPath }/css/summernote/summernote.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/summernote/summernote-bs3.css" rel="stylesheet">
	<style> 
	
		/* Summernote text editor  */
		.modal {
		    bottom: auto;
		    display: none;
		    left: 50%;
		    overflow-x: auto;
		    overflow-y: scroll;
		    position: absolute;
		    right: auto;
		    top: 50%;
		    z-index: 10050;
		}
		.note-editor {
			height: auto!important;
			min-height: 100px;
			border: solid 1px #e5e6e7;
			height:300px !important;
			overflow-y:scroll; 
		}
		input,select{
			 width:168px;
			 height:25px;
			 border:1px solid #ccc;
			 margin-left:24px;
		}
		
		.form-item{
			display:flex;
		}
		.label-text{
		   height: 34px;
		   line-height: 34px;
		   font-weight: normal;
		   width:15%;
		}
		.addInput{ 
			background-color: #ffffff;
		    background-image: none;
		    border: 1px solid #e5e6e7;
		    border-radius: 1px;
		    color: inherit;
		    display: block;
		    font-size: 14px;
		    padding: 6px 12px;
		    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
		    height: 34px;
		   line-height: 34px;
		   flex: 1;
		}
		.saveBtn{
			 display: block;
		    margin: 15px auto;
		    width: 120px;
		}
		
	input[type="radio"] + label::before {
	    content: "\a0"; /*不换行空格*/
	    display: inline-block;
	    vertical-align: middle;
	    font-size: 18px;
	    width: 1em;
	    height: 1em;
	    margin-right: .4em;
	    border-radius: 50%;
	    border: 1px solid #01cd78;
	    text-indent: .15em;
	    line-height: 1; 
	}

	input[type="radio"]:checked + label::before {
	    background-color: #01cd78;
	    background-clip: content-box;
	    padding: .2em;
	}	
	input[type="radio"] {
	    position: absolute;
	    clip: rect(0, 0, 0, 0);
	}		
		
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-content">
						<form name = "form1" id = "add_arBuildingContent"  enctype='multipart/form-data' style='width:100%;display:table;'>
							<div class="form-item">
								<label class="label-text">所属大楼：</label>
								<select name = "arBuildingId" id = "arBuildingId" onchange="get_content()">
									<c:forEach items="${arBuildingList }" var = "e">
										<option value = "${e.id }">${e.name}</option>
									</c:forEach>
								</select>
								<select name = "abcId" id = "abcId">
									<option value = "">请选择</option>
								</select>
							</div>
							<div class="form-item">
								<label class="label-text">名称：</label>
								<input type = "text" class = "addInput" name = "name" maxlength="20" ><br/><br/>
							</div>
                           	<c:forEach items="${imageUrlList }" var="list">
                            	<input type="radio" id = "${list.name }" name="logo" value="${list.imageUrl }">
                            	<label for = "${list.name }"><img src=${list.imageUrl }  style="width:20px;height:20px;" /></label>
							</c:forEach>
							<div class="form-item">
								<label class="label-text">是否添加视频：</label>
								<input type='file' name='videos' onchange="videoChange(this);" accept='.mp4'>
								&nbsp;&nbsp;只支持.mp4格式
							</div>
							<div class="form-item">
								<label class="label-text">视频缩略图：</label>
								<input type='file' name='videoImages' onchange="imageChange(this);" accept=".png,.jpg,.jpeg" >
								&nbsp;&nbsp;不能超过2M
							</div>
							<div class="form-item">
								<label class="label-text">内容：</label>
								<input type = "hidden" class = "addInput" id = "content" name = "content" >
                                  <div class = "summernote"></div>
                              </div><br/><br/>
							<button class="btn btn-primary saveBtn" type="submit">保存</button>
					    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
    
    <script type="text/javascript">
    
    //异步加载一级分类
    function get_content(){
		var abId = document.getElementById('arBuildingId').value.replace(",","");
		var content = $("#abcId");
		content.empty();
		$.get("/admin/arBuildingContent/getAbc/"+abId, function(result){
			var option0 = $("<option>").text('选择分类').val('');
			content.append(option0);
			for(var i=0;i<result.length;i++) {
				var option = $("<option>").text(result[i].name).val(result[i].id);
				content.append(option);
			}
		});
    }
    
    
    //上传视频
    function videoChange(target) {
        var name=target.value;
        var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        if(fileName !="mp4"){
           alert("请选择图片格式文件上传(.mp4格式)！");
           target.value="";
           return false;   //阻止submit提交
        }
	}

    //上传图片
    function imageChange(target) {
        var fileSize = 0;
        fileSize = target.files[0].size;
        var size = fileSize / 1024;
        if(size > 2000){
           alert("图片不能大于2M");
           target.value="";
           return false;   //阻止submit提交
        }
        var name=target.value;
        var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        if(fileName !="jpg" && fileName !="jpeg" && fileName !="png"){
           alert("请选择图片格式文件上传(jpg,jpeg,png)！");
           target.value="";
           return false;   //阻止submit提交
        }
	}

    $(document).ready(function () {
        	get_content();
		    $('.summernote').summernote({ 
		    	lang: "zh-CN",
		    	onImageUpload: function(files,editor,welEditable) { //the onImageUpload API  
		        	img = sendFile(files[0],editor,welEditable);  
		    	}  
		    });  
    });   
    function sendFile(file,editor,welEditable) {
        var data = new FormData();  
        data.append("file", file); 
        $.ajax({  
            data : data,  
            type : "post",  
            url : "${pageContext.request.contextPath }/admin/arBuildingContent/upload",  
            cache: false,
            contentType : false,  
            processData : false,  
            dataType : "json",  
            success: function(url) {  
           	 editor.insertImage(welEditable,url);
            },
            error:function(data){  
                alert("上传失败");  
            }  
        });  
    }  
    
    $().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#add_arBuildingContent").validate({
            rules: {
            	arBuildingId:{
                    required: true,
            	},
            	name: {//姓名
                    required: true,
    				maxlength: 20
                },
                content: {//地址
                    required: true
                }
            },
            messages: {
            	arBuildingId:{
            		required:icon + "请选择所属大楼"
            	},
            	name:{
            		required:icon + "请填写名称",
            		maxlength:icon + "最大长度为20"
            	},
            	content: {
            		required:icon + "请输入内容简介"
           		}
                
            },
    		submitHandler: function(form) {
    			addArBuildingContent();
    		}
        });
    });

    function cancel(){
 		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
 	}
	 function ValidateValue(textbox)
     {
          var IllegalString = "\`~@#;,.!#$%^&*()+{}|\\:\"<>?-=/,\' []";
          var textboxvalue = textbox.value;
          var index = textboxvalue.length - 1;
          
          var s = textbox.value.charAt(index);
          
          if(IllegalString.indexOf(s)>=0)
          {
             s = textboxvalue.substring(0,index);
             textbox.value = s;
          }
     }


    //上传图片
    function logoChange(target) {
        var fileSize = 0;
        fileSize = target.files[0].size;
        var size = fileSize / 1024;
        if(size > 2000){
           alert("图片不能大于2M");
           target.value="";
           return false;   //阻止submit提交
        }
        var name=target.value;
        var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        if(fileName !="jpg" && fileName !="jpeg" && fileName !="png"){
           alert("请选择图片格式文件上传(jpg,jpeg,png)！");
           target.value="";
           return false;   //阻止submit提交
        }
	}
      
	//添加或修改
	function addArBuildingContent(){	
		$("#content").val($('.summernote' ).code());
		var formData = new FormData($( "#add_arBuildingContent" )[0]);  
		$.ajax({
			processData: false,
			contentType: false,
    		url:"${pageContext.request.contextPath }/admin/arBuildingContent/add",
    		data:formData,
    		type:"post",
    		success:function(data){
    			if(data.code == 0){
					layer.msg(data.message,{icon:1});
					setTimeout('cancel()',1000);
    			}else {
					layer.msg(data.message,{icon:0});
    			}
    		}
    	});
	}

	</script>
</html>
